<template>
  <div>
    <a-card class="cardBox teamwork">
      <div class="tit" slot="title">多跨协同</div>
      <div class="content">
        <a-tabs default-active-key="1" size="large">
          <a-tab-pane key="1" tab="多跨协同">
            <div class="dkBox">
              <div class="itemDept">
                <div class="deptName" v-for="(item, i) in deptName.left" :key="`l${i}`">{{item}}</div>
              </div>
              <div class="itemImg" style="cursor: pointer" @click="brainClick">
                <img src="@/assets/img/img1.png" class="filesImg">
              </div>
              <div class="itemDept">
                <div class="itemDept">
                  <div class="deptName" v-for="(item, i) in deptName.right" :key="`r${i}`">{{item}}</div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="多跨部门">
            <div class="contentText">贯通公检法司、教育、人社、税务、应急等16个部门和层级数据，沉淀共享500余个字段数据，构建剧组和影视人员画像，创新地提供全方位人才、剧组相关业务智能服务。</div>
            <a-row :gutter="16">
              <a-col :span="6">
                <div class="item itemBg1">
                  <div class="name">卫健部门</div>
                  <div class="desc">筛查申请横影码的影视人才疫苗接种情况，做到疫情防控常态化</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg2">
                  <div class="name">公安部门</div>
                  <div class="desc">通过获取注册横影码的身份信息，排查影视人才违法犯罪情况，杜绝“带病进组”现象</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg3">
                  <div class="name">人社部门</div>
                  <div class="desc">交互影视人才信息，精准推送人才政策，全盘掌握横店流动人员的社会保障情况</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg4">
                  <div class="name">税务部门</div>
                  <div class="desc">将一站式剧组服务中的费用结算凭证推送至业务部门，减少偷税漏税现象</div>
                </div>
              </a-col>
            </a-row>
            <div class="brainBox">
              <div class="topLine">
                <span class="l1"></span>
                <span class="l2"></span>
                <span class="l3"></span>
                <span class="l4"></span>
                <span class="l5"></span>
              </div>
              <div class="bottomLine">
                <span class="l1"></span>
                <span class="l2"></span>
                <span class="l3"></span>
                <span class="l4"></span>
                <span class="l5"></span>
              </div>
              <div class="brain">
                <div class="itemP">
                  <p>影视文化</p>
                  <p>产业大脑</p>
                </div>
              </div>
            </div>
            <a-row :gutter="16">
              <a-col :span="6">
                <div class="item itemBg3">
                  <div class="name">应急管理部门</div>
                  <div class="desc">将剧组拍摄中高危作业申请、爆炸拍摄、用火拍摄等项目与应急管理局业务部门同步，保障拍摄中的安全生产等</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg4">
                  <div class="name">教育部门</div>
                  <div class="desc">推送影视人才子女入学等教育政策</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg1">
                  <div class="name">医保部门</div>
                  <div class="desc">个人医保和影视公司参保信息，医保关系转移接续等信息交互</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="item itemBg2">
                  <div class="name">市场监管部门</div>
                  <div class="desc">提供影视企业注册，市场综合监督管理和知识产权管理服务</div>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-modal v-model="brainVisible" width="88%" :footer="null" :centered="true" title="横店影视文化产业大脑">
      <div class="modalContent">
        <img src="@/assets/img/img2.png" class="filesImg">
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard4',
    data () {
      return {
        brainVisible: false,
        deptName: {
          left: ['卫健部门', '公安部门', '人社部门', '税务部门', '应急管理部门', '教育部门', '医保部门', '市场监管部门'],
          right: ['交管部门', '广电部门', '法院检察院', '发改部门', '民政部门', '消防部门', '文旅部门', '住建部门']
        }
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
      brainClick () {
        this.brainVisible = true
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);

    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .filesImg {max-width: 100%; display: block; margin: auto}
  .modalContent {
    height: auto; padding-right: 10px; overflow-x: hidden; overflow-y: auto;
    .biaoti {
      background: #f8f8f8;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 8px 15px; position: relative;
    }

    .biaoti::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #1890ff
    }
  }
  .teamwork {
    .item {
      box-shadow: 3px 3px 5px #d0d0d0;
      width: 96%; margin:15px auto; border-radius: 8px; padding: 15px; position: relative; color: #fff;}
    .name { font-size: 18px; margin-bottom: 5px; font-weight: bold}
    .desc {min-height: 63px; font-size: 14px}
    .itemBg1 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#e73eb0), to(#e83fc6));
    }
    .itemBg2 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#ed9746), to(#f1b441));
    }
    .itemBg3 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#53a3ff), to(#6bd4fe));
    }
    .itemBg4 {
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#68d3ca), to(#73eaba));
    }
    .brainBox { position: relative; margin: 76px 0; text-align: center;
      height: 120px;
      .topLine { position: absolute; top:-45px; left: 132px; right: 132px; height: 1px; background: #ccc;
        span {position: absolute; width: 1px; height: 46px; background: #ccc;}
        .l1{ left: 0; top: -46px}
        .l2{ left: 33.33%; top: -46px}
        .l3{ right: 33.33%; top: -46px}
        .l4{ right: 0; top: -46px}
      }
      .bottomLine {
        position: absolute; bottom:-45px; left: 132px; right: 132px; height: 1px; background: #ccc;
        span {position: absolute; width: 1px; height: 46px; background: #ccc;}
        .l1{ left: 0; bottom: -46px}
        .l2{ left: 33.33%; bottom: -46px}
        .l3{ right: 33.33%; bottom: -46px}
        .l4{ right: 0; bottom: -46px}
        .l5{ bottom: 0; height: 45px;}
      }
      .brain { display: inline-block; margin: auto;
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#ec8b50), to(#e86129)); color: #fff;
        border: 6px solid #f8dbd7;
        width: 120px; height: 120px; border-radius: 50%; overflow: hidden; box-shadow: 3px 3px 5px #b7b5b5;
        .itemP { padding-top: 28px; font-size: 18px}
        p { margin:0}
      }
    }

  }
  .dkBox { display: flex;
    .itemDept {
      width: 200px; display: flex;  justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;
      .deptName { width: 100%; text-align: center; background: #c7dffd; font-size: 17px; border-radius: 6px; padding: 15px 0;}
      .deptName:hover { background: #97c2f7}
      .deptName + .deptName { margin-top: 18px;}
    }
    .itemImg { width: calc( 100% - 400px); padding: 0 35px; display: flex;  justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}
  }
  .contentText {
    background: #eee;
    border-radius: 6px;
    padding: 8px 12px; font-size: 16px; margin: 0 5px;
  }
</style>
